<template>
  <div class="container">
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <div class="text-search">
        <!-- 第一行 -->
        <el-form label-width="80px" :model="query">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="学科名称">
                <el-input
                  class="text-box"
                  v-model="query.subjectName"
                ></el-input>
                <!-- 按钮 -->
                <el-button size="mini" @click="cleartext">清除</el-button>
                <el-button type="primary" size="mini" @click="getsubjectsList()"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <div class="add">
              <el-form-item>
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  size="mini"
                  @click="AddSubject"
                  >新增学科</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <!-- 警告行 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 列表区域 -->
      <el-table :data="SubjectsList" style="width: 100%" class="table-list">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160px">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
          width="120px"
        >
          <template slot-scope="scope">
            {{ scope.row.isFrontDisplay == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="Subclasses(scope.row.id, scope.row.subjectName)"
              >学科分类</el-button
            >
            <el-button
              type="text"
              @click="SubTags(scope.row.id, scope.row.subjectName)"
              >学科标签</el-button
            >
            <el-button type="text" @click="EditSubject(scope.row)"
              >修改</el-button
            >
            <el-button type="text" @click="DeleteSubject(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        class="page-size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.query.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="this.query.pagesize"
        background
        :total="total"
        layout="sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>

    <!-- 新增学科 -->
    <el-dialog title="新增学科" :visible.sync="AddSubjectdialog" width="30%">
      <!-- 主题内容区域 -->
      <el-form
        :model="AddSubjectForm"
        :rules="AddSrulesForm"
        ref="AddSrulesRef"
        label-width="100px"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            placeholder="请输入学科名称"
            v-model="AddSubjectForm.subjectName"
          ></el-input>
        </el-form-item>
        <!-- 是否显示 -->
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resettext">取 消</el-button>
        <el-button type="primary" @click="Adddialog">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改学科 -->
    <el-dialog title="修改学科" :visible.sync="EditSubjectdialog" width="30%">
      <!-- 主体内容区域 -->
      <el-form label-width="100px">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input placeholder="请输入学科名称" v-model="name"></el-input>
        </el-form-item>
        <!-- 是否显示 -->
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditSubjectdialog = false">取 消</el-button>
        <el-button type="primary" @click="EditSubjectclass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, detail, update, remove } from '@/api/hmmm/subjects'
export default {
  data() {
    return {
      // 修改学科
      name: '',
      id: '',
      // 参数
      query: {
        page: 1,
        pagesize: 10,
        subjectName: '' //学科名称
      },
      total: 0,
      // 学科列表
      SubjectsList: [],
      // 控制新增学科对话框的显示与隐藏
      AddSubjectdialog: false,
      // 添加学科的表单
      AddSubjectForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      // 添加学科的表单验证
      AddSrulesForm: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      value: true,

      // 控制修改学科对话框的显示与隐藏
      EditSubjectdialog: false
    }
  },
  created() {
    this.getsubjectsList()
  },
  methods: {
    // 获取学科列表数据
    async getsubjectsList() {
      const { data } = await list(this.query)
      console.log(data)
      this.SubjectsList = data.items
      this.total = data.counts
    },
    // 页面尺寸大小
    handleSizeChange(newsize) {
      this.query.pagesize = newsize
      this.getsubjectsList()
    },
    // 页面容量
    handleCurrentChange(newpage) {
      this.query.page = newpage
      this.getsubjectsList()
    },
    // 清除搜索框
    cleartext() {
      this.query.subjectName = ''
      this.getsubjectsList()
    },
    // 新增学科
    AddSubject() {
      this.AddSubjectdialog = true
    },
    // 点击取消按钮时重置
    resettext() {
      this.$refs.AddSrulesRef.resetFields()
      this.AddSubjectdialog = false
    },
    // 点击添加学科确定按钮的时候的表单验证
    Adddialog() {
      this.$refs.AddSrulesRef.validate(async valid => {
        if (!valid) {
          console.log(111)
          return false
        }
        // 表单验证成功后发起添加学科请求
        const { data } = await add({
          subjectName: this.AddSubjectForm.subjectName,
          isFrontDisplay: this.isSubjectNumber
        })
        // console.log(data)
        this.AddSubjectForm = data
        this.AddSubjectdialog = false
        this.getsubjectsList()
      })
    },
    // 学科分类
    Subclasses(id, name) {
      this.$router.push({ path: 'directorys', query: { id: id, name: name } })
    },
    // 学科标签
    SubTags(id, name) {
      this.$router.push({ path: 'tags', query: { id: id, name: name } })
    },
    // 修改学科
    // 在开启对话框之前，获取到对应的数据
    async EditSubject(data1) {
      this.name = data1.subjectName
      if (data1.isFrontDisplay === 0) {
        this.value = false
      } else {
        this.value = true
      }
      const { data } = await detail({ id: data1.id })
      console.log(data)
      this.id = data.id
      // 开启修改对话框
      this.EditSubjectdialog = true
    },
    // 点击修改按钮的确定按钮的时候，发起修改数据的请求
    async EditSubjectclass() {
      // console.log(id);
      const { data } = await update({
        id: this.id,
        subjectName: this.name,
        isFrontDisplay: this.isSubjectNumber
      })
      this.EditSubjectdialog = false
      this.getsubjectsList()
    },

    // 删除学科
    async DeleteSubject(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({
            id: id
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 删除成功，重新获取页面数据
          this.getsubjectsList()
        })
        .catch(err => err)

      // const resultConfirm = await this.$confirm(
      //   '此操作将永久删除该题目, 是否继续?',
      //   '提示',
      //   {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning',
      //   }
      // ).catch((err) => err)
      // console.log(resultConfirm)
      // // 如果点击确认按钮  返回字符串 confirm
      // // 如果点击取消按钮  返回字符串 cancel
      // if (resultConfirm !== 'confirm') return this.$message.info('已取消删除')

      // const { data: res } = await remove({
      //   id: id,
      // })
      // console.log(res)
      // // 删除成功，重新获取页面数据
      // this.getsubjectsList()
    }
  },
  computed: {
    isSubjectNumber() {
      if (this.value) {
        return 1
      } else {
        return 0
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .box-card {
    margin: 10px;
  }
  .text-box {
    width: 200px;
    padding-right: 15px;
  }
  .table-list {
    margin: 15px 0;
  }
  .page-size {
    float: right;
    padding: 15px;
  }
  .add {
    float: right;
    margin-right: 20px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  .text {
    margin-left: 10px;
  }
}
</style>
